<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
省份：<select id="province" onchange="changeCity();">
    <option value="-1">-----请选择-----</option>
    <option value="0">陕西省</option>
    <option value="1">山西省</option>
    <option value="2">河南省</option>
    <option value="3">河北省</option>
</select><br>
城市：<select id="city"></select>
<script type="text/javascript">
    let citys = new Array(); //创建一个二维数组
    citys[0] = ["西安", "渭南", "宝鸡", "咸阳", "延安"];
    citys[1] = ["太原", "临汾", "大同", "运城"];
    citys[2] = ["郑州", "洛阳", "开封", "南阳", "信阳", "焦作", "三门峡"];
    citys[3] = ["石家庄", "邯郸", "保定", "唐山", "廊坊"];

    function changeCity() {
        let province = document.getElementById("province").value;
        let city = document.getElementById("city");
        //把城市列表清空。
        city.options.length = 0;
        //判断用户选择的省份
        if (province != -1) {
            for (let i = 0; i < citys[province].length; i++) {
                city.add(new Option(citys[province][i], citys[province][i]));
            }
        }
    }
</script>
</body>
</html>
